<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts</title>
    <!-- <script src="./js/data.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script> -->
    <script src="./js/echarts.js"></script>
    <script src="./js/theme.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    // 初始化
    const chart = echarts.init(
      document.getElementById('chart'), // 容器
      'westeros', // 主题
      // 渲染方式 svg（用于解决放大文本出现锯齿），默认canvas
      { renderer: 'svg' }
    )
    // 配置
    chart.setOption({
      title: {
        text: '标题' // 标题
      },
      // 图例
      xAxis: {
        data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00']
        // type: 'category' // 默认分类图
      },
      yAxis: {
        // max: 500
      },
      series: {
        type: 'bar', // 柱状图
        // 数据
        data: [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150]
      }
    })
  </script>
</html>
